<template>
  <div>
    <h3>换相器实时数据</h3>
    <flexbox>
      <flexbox-item>
        <x-button type="primary" @click.native="back">返回</x-button>
      </flexbox-item>
      <flexbox-item>
        <x-button type="primary" @click.native="toMachineList">台账</x-button>
      </flexbox-item>
    </flexbox>
    <group>
      <card>
        <div slot="content" class="card-flex card-content">
          <div class="vux-1px-r">
            归属地
            <br />
            <span>{{location}}</span>
          </div>
          <div class="vux-1px-r">
            台区号
            <br />
            <span>{{areaNo}}</span>
          </div>
          <div>
            换相器台数
            <br />
            <span>{{areaAmount}}</span>
          </div>
        </div>
      </card>
    </group>
    <group>
      <el-table :data="data" border stripe fit style="width: 100%;font-size: 13px;padding: 0;" :header-cell-style="tableHeader" :cell-style="tableCell">
        <el-table-column fixed prop="machineNo" label="换相器号">
        </el-table-column>
        <el-table-column label="工作相">
          <template slot-scope="scope">
            <span v-if="scope.row.WORKL==0">D（脱网状态）</span>
            <span v-if="scope.row.WORKL==1">A</span>
            <span v-if="scope.row.WORKL==2">B</span>
            <span v-if="scope.row.WORKL==3">C</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="最后通讯时间">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.STAT==0">运行正常</span>
            <span v-if="scope.row.STAT==1">过载闭锁</span>
            <span v-if="scope.row.STAT==2">过压闭锁</span>
            <span v-if="scope.row.STAT==3">超温闭锁</span>
            <span v-if="scope.row.STAT==4">禁止换相</span>
            <span v-if="scope.row.STAT==5">缺相闭锁</span>
            <span v-if="scope.row.STAT==6">换相失败</span>
            <span v-if="scope.row.STAT==128">通信超时</span>
          </template>
        </el-table-column>
        <el-table-column label="负载电流">
          <template slot-scope="scope">
            <span>{{scope.row.I}}A</span>
          </template>
        </el-table-column>
        <el-table-column label="Ua">
          <template slot-scope="scope">
            <span>{{scope.row.Ua}}V</span>
          </template>
        </el-table-column>
        <el-table-column label="Ub">
          <template slot-scope="scope">
            <span>{{scope.row.Ub}}V</span>
          </template>
        </el-table-column>
        <el-table-column label="Uc">
          <template slot-scope="scope">
            <span>{{scope.row.Uc}}V</span>
          </template>
        </el-table-column>
        <el-table-column prop="PF" label="PF">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="toChangeRecord(scope.row.id)" type="text" style="font-size:17px;">换相记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </group>
    <loading :show="showLoading" text="加载中..."></loading>
  </div>
</template>

<script>
import { Group, XButton, Card, Flexbox, FlexboxItem, Loading } from "vux";
import Http from "./../unit/http.js";

export default {
  components: {
    Group,
    XButton,
    Card,
    Flexbox,
    FlexboxItem, Loading
  },
  data() {
    return {
      showLoading:false,
      location: "",
      areaNo: "",
      areaAmount: 0,

      data: []
    };
  },
  mounted() {
    this.getId();
  },

  watch:{
    data:function(){
      this.showLoading = false
    }
  },
  
  methods: {
    getId() {
      const id = this.$route.query.id;
      this.getData(id);
    },

    getData(id) {
      this.showLoading = true;
      const self = this;
      const param = { areaId: id, isOnline: true };
      const url = "/yitai/admin/machine";
      const success = function(response) {
        
        self.data = response.data.info;
        self.location = response.data.info[0].location;
        self.areaNo = response.data.info[0].areaNo;
        self.areaAmount = response.data.info.length;
      };
      const failed = function() {
        
      };
      Http.http(url, param, success, failed);
    },

    back() {
      this.$router.go(-1);
    },

    toChangeRecord(id) {
      this.$router.push({ path: "/changeRecord", query: { id: id } });
    },
    toMachineList() {
      const id = this.data[0].areaId
      this.$router.push({ path: "/machineList", query: { id: id }  });
    },

    //elementui的表格样式
    tableHeader({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "color: #242424;text-align:center;font-size:16px;";
      }
    },
    tableCell({ row, column, rowIndex, columnIndex }) {
      return "text-align:center;color: #242424;font-size:17px;";
    }
  }
};
</script>

<style scoped >
h3 {
  margin-bottom: 20px;
}
button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.card-flex {
  display: flex;
}
.card-content {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-flex > div {
  flex: 1;
  text-align: center;
  font-size: 18px;
}
.card-flex span {
  color: #005e9c;
}
.vux-1px-r:after {
  border-right: 1px solid #005e9c !important;
}

</style>